<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">

    <el-form :inline="true" :model="stuSearchForm" class="demo-form-inline">
        <el-form-item label="学生编号">
            <el-input v-model="stuSearchForm.sid" placeholder="学生编号"></el-input>
        </el-form-item>
        <el-form-item label="学生编号">
            <el-input v-model="stuSearchForm.sname" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学生编号">
            <el-input v-model="stuSearchForm.age" placeholder="学生年龄"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="initTable">查询</el-button>
            <el-button type="danger" @click="batchDelete">批量删除</el-button>
            <el-button type="primary" @click="Add">添加</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="tableData"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="sid"
                label="学生编号">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="aaa.cname"
                label="班级名称">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作">
            <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" @click="Student(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--
        @size-change:
         @current-change:
         page-sizes:[]
         :current-page=当前页码
         :page-size默认每页显示的条数
         :total 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--编辑对话框-->
    <el-dialog
            title="修改员工"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="studentForm" label-width="80px" >
            <el-form-item label="学生编号">
                <el-input v-model="studentForm.sid"></el-input>
            </el-form-item>
            <el-form-item label="学生名字">
                <el-input v-model="studentForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="学生年龄">
                <el-input v-model="studentForm.age"></el-input>
            </el-form-item>
            <el-form-item label="班级编号">
                <el-input v-model="studentForm.cid"></el-input>
            </el-form-item>
            <el-form-item label="班级名称">
                <el-select v-model="studentForm.cid" placeholder="请选择">
                    <el-option
                        v-for="item in classes"
                        :key="item.cid"
                        :label="item.cname"
                        :value="item.cid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="updateStudent">确认修改</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog
            title="添加学生"
            :visible.sync="dialogVisibles"
            width="30%">
        <el-form ref="form" :model="studentForm" label-width="80px" >
            <el-form-item label="学生名字">
                <el-input v-model="studentForm.sname"></el-input>
            </el-form-item>
            <el-form-item label="学生年龄">
                <el-input v-model="studentForm.age"></el-input>
            </el-form-item>
            <el-form-item label="班级编号">
                <el-input v-model="studentForm.cid"></el-input>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="addStudent">确认添加</el-button>
                <el-button @click="dialogVisibles=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            dialogVisibles:false,
            //编辑对话框的显示和隐藏
            dialogVisible:false,
            /*搜索*/
            stuSearchForm:{},
            //编辑表单对象
            studentForm:{},
            tableData: [],
            currentPage:1,
            pageSize:5,
            total:0,
            //所有班级
            classes:[],
            //表格的选中项
            multipleSelection:[],
            //声明被选中的id
            /*ids:[],*/
            //增加
            //students:{}
        },
        created(){
            this.initTable(),
                //查询所有部门
            this.loadAllClass()
        },
        methods:{
            addStudent(){
                axios.post("http://localhost:8080/student/insert",this.studentForm).then(result=>{
                    if (result.data.code===200){

                        this.$message.success("添加成功") //弹出成功的消息框
                        this.dialogVisibles=false;
                        this.initTable() //重新加载表格
                    }
                })
            },
            //批量删除
            batchDelete(){
                this.ids=this.multipleSelection.map(item=>item.sid)
                console.log(this.ids)
                axios.post("http://localhost:8080/student/deleteList",this.ids).then(result=>{
                    if(result.data.code===200){
                        this.$message.success(result.data.msg);
                        //刷新页面
                        this.initTable();
                    }
                })
            },
            //获取表格被选中的项
            handleSelectionChange(val){
                console.log(val)
                this.multipleSelection=val;
            },
            //确认修改员工信息
            updateStudent(){
                axios.put("http://localhost:8080/student/update",this.studentForm).then(result=>{
                    if (result.data.code===200){
                        this.$message.success("修改成功") //弹出成功的消息框

                        this.dialogVisible=false;
                        this.initTable() //重新加载表格
                    }
                })
            },
            loadAllClass(){
                axios.get("http://localhost:8080/class/list").then(result=>{
                    this.classes=result.data.data
                    console.log(this.classes)
                })
            },
            initTable(){
                axios.post("http://localhost:8080/student/list/"+this.currentPage+"/"+this.pageSize,this.stuSearchForm).then(result=>{
                    this.tableData=result.data.data.records;
                    this.total=result.data.data.total
                })
            },
            //改变每页的条数时触发该方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            //改变当前页码时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            //删除学生
            del(row){
                let sid = row.sid;
                axios.delete("http://localhost:8080/student/delete/"+sid).then(result=>{
                    if (result.data.code===200){
                        this.$message.success("删除成功") //弹出成功的消息框
                        this.initTable() //重新加载表格
                    }
                })
            },
            //修改
            Student(row){
                this.dialogVisible=true;
                this.studentForm=row;
            },
            Add(){
                this.dialogVisibles=true;
            }
        }
    })
</script>
</html>
